<template>
  <div class="addCarId" @click="closeKeyword">
    <!-- 车牌添加页面 头部 -->
    <CarHeader></CarHeader>
    <!-- 车牌添加页面 车型车牌部分 -->
    <div class="addCarId-middle">
      <div class="addCarId-middle-top">
        <span class="text">车型</span>
        <router-link
          to="/home/addCar"
          tag="h1"
        >{{newCarInfo.name}} - {{newCarInfo.carCc}} {{newCarInfo.displacement}} {{newCarInfo.year}}</router-link>
        <router-link to="/home/addCar" class="icon">></router-link>
      </div>
      <div class="addCarId-middle-foot">
        <span class="carNum">车牌号</span>
        <div class="input" @click.stop="changeFlag">
          <div class="input-item">{{carId[0]}}</div>
          <div class="input-item">{{carId[1]}}</div>
          <span class="dian">.</span>
          <div class="input-item">{{carId[2]}}</div>
          <div class="input-item">{{carId[3]}}</div>
          <div class="input-item">{{carId[4]}}</div>
          <div class="input-item">{{carId[5]}}</div>
          <div class="input-item">{{carId[6]}}</div>
          <div class="input-item item1">
            <span v-show="flag3">+新能</span>
            <span v-show="flag2">{{carId[7]}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 确定添加按钮 -->
    <div class="addCarId-button">
      <mt-button type="primary" size="large" @click="confirmCarId">确定</mt-button>
    </div>
    <!-- 弹出键盘部分 -->
    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
      @beforeLeave="beforeLeave"
      @leave="leave"
      @afterLeave="afterLeave"
      @leaveCancelled="leaveCancelled"
    >
      <div class="keyword" v-show="flag">
        <div class="keyword-header" @click="closeKeyword">
          <a>关闭</a>
        </div>
        <div class="keyword-foot" @click.stop="openKeyword">
          <span class="keyword-foot-item" v-for="item in currentprovice" :key="item">
            <button type="button" @click="changeKeyword(item)">{{item}}</button>
          </span>
          <button type="button" class="clear" v-show="flag1" @click="clearKeyword">
            <span class="mui-icon mui-icon-close"></span>
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import CarHeader from "./CarHeader.vue";
import { mapState, mapMutations } from "vuex";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      flag: true,
      currentprovice: [],
      province: [],
      numalp: [],
      carId: [],
      flag1: false,
      flag2: false,
      flag3: true,
      newCarInfo: {},
      title: "添加成功"
    };
  },
  components: {
    CarHeader
  },
  computed: {
    ...mapState({
      currentCarInfo: "carInfo"
    }),
    ...mapState({
      currentChangeCarInfo: "changeCarInfo"
    })
  },
  activated() {
    this.getProvince();
    this.getNumAlp();
    this.changeCarInfo();
  },
  methods: {
    changeCarInfo() {
      if (Object.keys(this.currentChangeCarInfo).length === 0) {
        this.newCarInfo = this.currentCarInfo;
      } else {
        this.newCarInfo = this.currentChangeCarInfo;
        this.carId = this.currentChangeCarInfo.carId;
        this.flag = true;
        this.flag1 = false;
        this.title = "修改成功";
      }
    },
    changeFlag() {
      this.flag = !this.flag;
    },
    closeKeyword() {
      this.flag = false;
    },
    openKeyword() {},
    changeKeyword(key) {
      if (!this.flag1) {
        this.carId = [];
        this.currentprovice = this.numalp;
        this.flag1 = true;
      }
      if (this.carId.length < 9) {
        this.carId.push(key);
        //console.log(this.carId);
      }
      if (this.carId.length === 8) {
        this.flag2 = true;
        this.flag3 = false;
      } else if (this.carId.length > 8) {
        this.flag = false;
      }
    },
    clearKeyword() {
      //每次点击小按钮，删除数组中最后一个数据
      if (this.carId.length === 9) {
        //splice 从数组中第七个位置开始删除数据，共删除2个
        this.carId.splice(7, 2);
        this.flag2 = false;
        this.flag3 = true;
      } else {
        this.carId.pop();
        this.flag2 = false;
        this.flag3 = true;
        if (this.carId.length === 0) {
          this.currentprovice = this.province;
          this.flag1 = false;
        }
      }
    },
    confirmCarId() {
      MessageBox.alert(this.title, "提示").then(result => {
        if (Object.keys(this.currentCarInfo).length === 0) {
          this.$router.push("/home");
        } else {
          this.$router.push("/home/userCar");
        }
      });
      var car = {
        name: this.newCarInfo.name,
        carCc: this.newCarInfo.carCc,
        displacement: this.newCarInfo.displacement,
        year: this.newCarInfo.year,
        carId: this.carId,
        url: this.newCarInfo.url,
        imgActive: false,
        buttonActive: true
      };
      this.$store.commit("getCar", car);
    },
    beforeEnter(el) {
      el.style.bottom = "-259.5px";
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      el.offsetWidth;
      el.style.bottom = "0";
      el.style.transition = "all 0.5s ease";

      done();
    },
    afterEnter(el) {
      this.flag = true;
    },
    beforeLeave(el) {
      el.style.bottom = "0";
      el.style.transform = "translate(0,0)";
    },
    leave(el, done) {
      el.offsetWidth;
      el.style.bottom = "-259.5px";
      el.style.transition = "all 0.5s ease";

      //done();
    },
    afterLeave() {},
    leaveCancelled() {
      this.flag = false;
    },
    getProvince() {
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.currentprovice = this.province = result.body.province;
        }
      });
    },
    getNumAlp() {
      this.$http.get("/city.php").then(result => {
        if (result.body.status === 0) {
          this.numalp = result.body.numalp;
        }
      });
    }
  },
  watch: {},
  mounted() {
    // var that = this;
    // this.$refs.changeFlag.addEventListener("click", function() {
    //   that.flag = !that.flag;
    // });
  }
};
</script>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
}
.addCarId {
  position: relative;
  overflow: hidden;
  height: 100%;
  .addCarId-middle {
    background-color: #ffffff;
    margin-top: 16px;
    .addCarId-middle-top {
      display: flex;
      span {
        display: block;
      }
      .text {
        font-size: 14px;
        line-height: 14px;
        color: #999999;
        margin: 16px 20px 27px 25.5px;
        width: 36px;
        text-align: right;
      }
      .icon {
        font-size: 14px;
        position: absolute;
        right: 16px;
        color: #333333;
        margin-top: 14px;
      }
      h1 {
        font-size: 14px;
        color: #333333;
        margin-top: 16px;
        font-weight: normal;
      }
    }
    .addCarId-middle-foot {
      display: flex;
      .carNum {
        font-size: 14px;
        line-height: 14px;
        color: #999999;
        margin: 4.5px 16px 51.5px 20px;
        width: 45.5px;
      }
      .input {
        width: 277.5px;
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        .input-item {
          width: 32px;
          height: 32px;
          border: 0.5px solid #d8d8d8;
          text-align: center;
          line-height: 32px;
        }
        .item1 {
          border: 0.5px dashed #d8d8d8;
          text-align: none;
          line-height: none;
          span {
            font-size: 9px;
          }
        }
        .dian {
          //font-size: 4.5px;
          color: #d8d8d8;
        }
        span {
          color: #333333;
        }
      }
    }
  }
  .addCarId-button {
    flex: 1 1;
    margin-top: 25px;
    padding: 0 36px 0 36px;
    button {
      font-size: 18px;
      height: 45px;
      border-radius: 22.5px;
      background-color: #293d7a;
    }
  }
  .keyword {
    height: 259.5px;
    position: absolute;
    bottom: 0;
    .keyword-header {
      height: 30px;
      line-height: 30px;
      background-color: #ffffff;
      border-top: 1px solid lightblue;
      a {
        font-size: 14px;
        position: absolute;
        right: 16px;
      }
    }
    .keyword-foot {
      background-color: rgb(216, 212, 212);
      height: 229.5px;
      display: flex;
      flex-wrap: wrap;
      .keyword-foot-item {
        width: 10%;
        height: 25%;
        text-align: center;
        padding-top: 5px;
        button {
          color: #333333;
          font-size: 14px;
          width: 90%;
          height: 80%;
          box-shadow: 2px 2px 5px #aaa9a9;
          margin: 0;
          padding: 0;
        }
      }
      .clear {
        width: 60px;
        height: 43px;
        margin-top: 5px;
        box-shadow: 2px 2px 5px #aaa9a9;
        margin-left: 3px;
        background-color: rgb(170, 167, 167);
        padding: 0;
        border: none;
      }
    }
  }
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.appcontainer[data-v-ec61c590] {
  padding: 0;
  height: 100%;
}
.mint-msgbox {
  width: 63%;
  font-size: 14px;
  border-radius: 5px;
  .mint-msgbox-title {
    color: black;
    font-weight: bold;
    font-size: 18px;
  }
  .mint-msgbox-message {
    color: black;
    line-height: 24px;
  }
  .mui-btn,
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    font-size: 16px;
    color: #26a2ff;
  }
}
</style>